<template>
  <div class="root base-background-img">
    <div class="home">
      <router-link to="/">
        <img src="~@/assets/hohoplay/common/home.png">
      </router-link>
    </div>
    <div class="back">
      <router-link to="/">
        <img src="~@/assets/hohoplay/common/back.png">
      </router-link>
    </div>
    <div class="yiji">
      <router-link v-show="up_link1" :to="{name: 'hohoplay-base', query: {compoent: 'hohoplay-play1'}}">
        <img src="~@/assets/hohoplay/common/yiji.png">
      </router-link>
      <router-link v-show="up_link2" to="#" v-on:click.native="warntext">
        <img src="~@/assets/hohoplay/common/yiji.png">
      </router-link>
    </div>
    <div class="erji">
      <router-link v-show="down_link1" :to="{name: 'hohoplay-base', query: {compoent: 'hohoplay-play2'}}">
        <img src="~@/assets/hohoplay/common/erji.png">
      </router-link>
      <router-link v-show="down_link2" to="#" v-on:click.native="warntext">
        <img src="~@/assets/hohoplay/common/erji.png">
      </router-link>
    </div>
    <div class="sanji">
      <router-link v-show="up_link1" :to="{name: 'hohoplay-base', query: {compoent: 'hohoplay-play3'}}">
        <img src="~@/assets/hohoplay/common/sanji.png">
      </router-link>
      <router-link v-show="up_link2" to="#" v-on:click.native="warntext">
        <img src="~@/assets/hohoplay/common/sanji.png">
      </router-link>
    </div>
    <div class="siji">
      <router-link v-show="down_link1" :to="{name: 'hohoplay-base', query: {compoent: 'hohoplay-play4'}}">
        <img src="~@/assets/hohoplay/common/siji.png">
      </router-link>
      <router-link v-show="down_link2" to="#" v-on:click.native="warntext">
        <img src="~@/assets/hohoplay/common/siji.png">
      </router-link>
    </div>
    <div class="wuji">
      <router-link v-show="up_link1" :to="{name: 'hohoplay-base', query: {compoent: 'hohoplay-play5'}}">
        <img src="~@/assets/hohoplay/common/wuji.png">
      </router-link>
      <router-link v-show="up_link2" to="#" v-on:click.native="warntext">
        <img src="~@/assets/hohoplay/common/wuji.png">
      </router-link>
    </div>
    <div class="liuji">
      <router-link v-show="down_link1" :to="{name: 'hohoplay-base', query: {compoent: 'hohoplay-play6'}}">
        <img src="~@/assets/hohoplay/common/liuji.png">
      </router-link>
      <router-link v-show="down_link2" to="#" v-on:click.native="warntext">
        <img src="~@/assets/hohoplay/common/liuji.png">
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hohoplay',
  data () {
    return {
      up_link1: false,
      up_link2: true,
      down_link1: false,
      down_link2: true
    }
  },
  created () {
    console.log(this.$store.state.jurisdiction)
    if (this.$store.state.jurisdiction === 0) {
      alert('校验文件无效!')
    } else if (this.$store.state.jurisdiction === 1) {
      this.up_link1 = true
      this.up_link2 = false
    } else if (this.$store.state.jurisdiction === 2) {
      this.down_link1 = true
      this.down_link2 = false
    } else if (this.$store.state.jurisdiction === 3) {
      this.up_link1 = true
      this.up_link2 = false
      this.down_link1 = true
      this.down_link2 = false
    }
  },
  methods: {
    warntext: function () {
      alert('暂未开放！')
    }
  }
}
</script>

<style scoped>
@import "~@/assets/style/base.css";
.root {
  background: url(~@/assets/hohoplay/common/bg.png);
}
.root > div {
  position: absolute; 
}
.root > div {
  position: absolute; 
}
.home {
top: 54px;
    left: 57px;
}
.back {
    top: 153px;
    left: 57px;
}
.yiji {
    top: 146px;
    left: 307px;
}
.erji {
    top: 385px;
    left: 306px;
}
.sanji {
    top: 120px;
    left: 545px;
}
.siji {
    top: 400px;
    left: 585px;
}
.wuji {
    top: 142px;
    left: 830px;
}
.liuji {
    top: 425px;
    left: 852px;
}
</style>
